<script setup>
import { ref } from 'vue'
import { catGetListService } from '@/api/admin/category'
import { tagListService } from '@/api/admin/tag'
import { useRoute, useRouter } from 'vue-router'
import { artGetBlogDetailService } from '@/api/web/article'
import {
  artAddArticleService,
  artUpdateArticleService
} from '@/api/admin/article'
import { ElMessage } from 'element-plus'
import { getSummary } from '@/utils/getSummary'

// 分类列表
const catList = ref([])
const getCatList = async () => {
  const res = await catGetListService()
  catList.value = res.data.data
}
// 分类列表
getCatList()
const tagList = ref([])
const getTagList = async () => {
  const res = await tagListService()
  tagList.value = res.data
}
getTagList()

// 默认值不需要响应式
const defForm = {
  title: '',
  catId: '',
  tags: '',
  summary: '',
  articleStatus: '',
  originContent: '',
  convertContent: ''
}
const formModel = ref({
  ...defForm // 如果默认值是响应式需要加上 .value  来进行展开
})

// 从编辑过来的
const route = useRoute()
const getDetail = async () => {
  const id = route.query.id
  if (id) {
    const res = await artGetBlogDetailService(id)
    formModel.value = res.data
    formModel.value.tags = formModel.value.tags.map((item) => item.id)
  }
}

getDetail()
const setArtForm = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  catId: [{ required: true, message: '请选择分类', trigger: 'blur' }],
  tags: [{ required: true, message: '请选择标签', trigger: 'blur' }]
}

// 副本文本
const onChange = (md, html) => {
  formModel.value.originContent = md
  formModel.value.convertContent = html
}

// 控制显示还是隐藏
const dialog = ref(false)

//  打开文章设置
const onSubmit = () => {
  dialog.value = true
}
const setArtFormRef = ref()
// 发布
const router = useRouter()
const onSave = async (status) => {
  await setArtFormRef.value.validate()
  formModel.value.articleStatus = status
  if (!formModel.value.summary) {
    formModel.value.summary = getSummary(formModel.value.originContent, 80)
  }
  if (formModel.value.id) {
    await artUpdateArticleService(formModel.value)
  } else {
    await artAddArticleService(formModel.value)
  }

  ElMessage.success(formModel.value.id ? '修改成功' : '发布成功')
  dialog.value = false
  formModel.value = { ...defForm }
  router.push('/admin/article')
}

defineOptions({
  name: 'PostPage'
})
</script>
<template>
  <el-form>
    <el-form-item>
      <div class="title">
        <h4>{{ route.query.id ? '编辑文章' : '新建文章' }}</h4>
        <el-button type="primary" @click="onSubmit()">
          {{ route.query.id ? '编辑' : '发布' }}</el-button
        >
      </div>
    </el-form-item>
    <el-form-item required>
      <el-input
        v-model="formModel.title"
        placeholder="请输入文章名称"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <v-md-editor
        v-model="formModel.originContent"
        height="400px"
        @change="onChange"
      ></v-md-editor>
    </el-form-item>
  </el-form>
  <el-dialog v-model="dialog" title="文章设置" width="500">
    <el-form
      label-width="80px"
      :model="formModel"
      :rules="setArtForm"
      ref="setArtFormRef"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formModel.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分类" prop="catId">
        <el-select v-model="formModel.catId" placeholder="请选择">
          <el-option
            v-for="item in catList"
            :key="item.id"
            :label="item.catName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="tags">
        <el-select v-model="formModel.tags" multiple placeholder="请选择">
          <el-option
            v-for="item in tagList"
            :key="item.id"
            :label="item.tagName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="摘要">
        <el-input v-model="formModel.summary"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onSave(1)">发布</el-button>
        <el-button type="warning" @click="onSave(0)">草稿</el-button>
        <el-button @click="dialog = false"> 取消 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.title {
  padding: 0 20px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title h4 {
  font-size: 20px;
}
</style>
